<template>
    <div>
        <!--密码登录界面-->
        <div id="PswLogin">
            <input type="text" placeholder="手机号码/邮箱">
            <div id="Sms">
                <input type="text" placeholder="短信验证码" @input="input">
                <button>获得短信验证码</button>
            </div>
            
            <button ref="login">立即登录</button>
            <div id="PswLogin-bottom">
                <router-link to="/Myself/Regist">
                    <p>立即注册</p>
                </router-link>
                
            </div>
        </div>	
    </div>
</template>

<script>
export default{
    methods:{
        input:function(e){
            if(e.target.value.length>=6){
                this.$refs.login.style.backgroundColor = "#ee4000"
            }else{
                this.$refs.login.style.backgroundColor = "#eee5de"
            }
            
        }
    }
}
</script>

<style scoped>
    #PswLogin{
        margin-top: 3vh;
        padding-left: 10vw;
        font-size: 4vw;
    }
    #PswLogin input{
        width: 80vw;
        height: 7vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
        border:1px solid #dedede;
        color: grey;
        padding: 1vh 0 1vh 5vw;
        
    }
    #PswLogin button{
        margin-top: 2vh;
        background-color: #eee5de;
        color: white;
        border-radius: 5px;
        border: none;
        width: 80vw;
        height: 8vh;
    }
    #PswLogin-bottom{
        margin-top: 2vh;
        width: 80vw;
        display: flex;
        justify-content: space-between;
        color: #5b5b5b;
    }
    #PswLogin-bottom a{
        color: #5b5b5b;
        text-decoration: none;
    }
    #PswLogin #Sms input{
        width: 40vw;
        margin-right: 5vw;
    }
    #PswLogin #Sms button{
        width: 35vw;
    }
</style>